* {
  box-sizing: border-box;
}
:deep(.el-container) {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;
  height: calc(100vh - 41px);
}
:deep(.mike_form) {
  height: $height;
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
}
:deep(.el-select) {
  width: 100%;
}

// :deep(.el-dialog__header) {
//   margin-right: 0 !important;
//   border-top-left-radius: 4px;
//   border-top-right-radius: 4px;
//   padding: 0px 13px !important;
//   border-bottom: none !important;
//   line-height: 53px;
//   // border-bottom: 1px solid #e2e2e2;
//   height: 50px;
//   color: white;
//   font-weight: bold;
//   font-size: 14px;
//   // background-image: linear-gradient(135deg, #0cd7bd 10%, #50c3f7);
//   background-color: var(--el-color-primary);
// }
// :deep(.el-dialog__headerbtn) {
//   height: 50px !important;
//   width: 50px !important;
//   top: 0 !important;
// }
// :deep(.el-dialog__headerbtn .el-dialog__close) {
//   color: var(--el-dialog-bg-color) !important;
// }

:deep(.el-dialog__header) {
  border-bottom: 1px solid #e2e2e2 !important;
  margin-right: 0 !important;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding: 0px 13px !important;
  // border-bottom: none !important;
  line-height: 53px;
  height: 50px;
  color: var(--el-button-text-color) !important;
  font-weight: bold;
  font-size: 14px;
  // background-image: linear-gradient(135deg, #0cd7bd 10%, #50c3f7);
  background-color: #fff !important;
}
:deep(.el-dialog__headerbtn) {
  height: 50px !important;
  width: 50px !important;
  top: 0 !important;
  // color: var(--el-button-text-color) !important;
}
:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: var(--el-button-text-color) !important;
  // color: var(--el-dialog-bg-color) !important;
}
:deep(.el-dialog__title) {
  color: var(--el-button-text-color);
}
:deep(.el-dialog) {
  overflow: hidden;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

html,
body {
  height: 100%;
  margin: 0;
}
#app {
  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  min-height: 100%;
  height: 100%;
}
.fc-style {
  height: 100%;
  .fc-container {
    background: #fff;
    height: 100%;
    .fc-main {
      position: relative;
    }
  }
  .center-container {
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    padding: 0;
    .btn-bar {
      height: 45px !important;
      line-height: 45px;
      font-size: 18px;
      border-bottom: 2px solid #e4e7ed;
      text-align: right;
      background-color: #fff;
      padding: 0 10px;
      .svg-icon {
        font-size: 16px;
        margin-right: 5px;
      }
    }
  }
  .components {
    padding: 8px 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    .widget-cate {
      padding: 8px 12px;
      font-size: 13px;
    }
    ul {
      position: relative;
      overflow: hidden;
      padding: 0 10px 10px;
      margin: 0;
    }
    .form-edit-widget-label {
      font-size: 12px;
      display: block;
      width: 48%;
      line-height: 26px;
      position: relative;
      float: left;
      left: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 1%;
      border: 1px solid #f4f6fc;
      &:hover {
        border: 1px dashed #409eff;
        & > a {
          color: #409eff;
        }
      }
      & > a {
        color: #333;
        display: block;
        cursor: move;
        background: #f4f6fc;
        border: 1px solid #f4f6fc;
        .svg-icon {
          margin-right: 6px;
          margin-left: 8px;
          font-size: 14px;
          display: inline-block;
          vertical-align: middle;
        }
        span {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
  .widget-form-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    .display_area,
    .hidden_area,
    .trash_area,
    .button_area {
      width: $width;
      position: relative;
      .widget-form-display,
      .widget-form-hidden,
      .widget-form-trash,
      .widget-form-button {
        background: #fff;
        overflow: auto;
        border: 1px dashed #999;
        // min-height: calc(100vh - 65px);
        box-sizing: border-box;
        height: $height;
        .widget-item-container {
          position: relative;
          .widget-view-action {
            position: absolute;
            right: 0;
            bottom: -2px;
            height: 28px;
            line-height: 28px;
            // background: #409eff;
            background: var(--el-color-primary);
            z-index: 10;
            .svg-icon {
              font-size: 14px;
              color: #fff;
              margin: 0 5px;
              cursor: pointer;
            }
          }
          .widget-view-drag {
            position: absolute;
            height: 28px;
            left: 0;
            top: -2px;
            line-height: 28px;
            // background: #409eff;
            background: var(--el-color-primary);
            z-index: 10;
            .svg-icon {
              font-size: 14px;
              color: #fff;
              margin: 0 5px;
              cursor: move;
            }
          }
          .mike_active {
            background: #e6a23c;
          }
        }
        .widget-col-list {
          min-height: 50px;
          border: 1px dashed #ccc;
          background: #fff;
        }
        .widget-view {
          overflow: hidden;
          padding-bottom: 18px;
          position: relative;
          border: 1px dashed rgba(170, 170, 170, 0.7);
          background-color: rgba(236, 245, 255, 0.3);
          margin: 0px;
          .widget-view-description {
            height: 15px;
            line-height: 15px;
            font-size: 13px;
            margin-top: 6px;
            color: #909399;
          }
          &:after {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            display: block;
          }
          &:hover {
            background: #ecf5ff;
            outline: 1px solid #409eff;
            outline-offset: 0;
            &.active {
              // outline: 2px solid #409eff;
              // border: 1px solid #409eff;
              outline: 2px solid var(--el-color-primary);
              border: 1px solid var(--el-color-primary);
              outline-offset: 0;
            }
            .widget-view-drag {
              display: block;
            }
          }
          &.active {
            // outline: 2px solid #409eff;
            // border: 1px solid #409eff;
            outline: 2px solid var(--el-color-primary);
            border: 1px solid var(--el-color-primary);
          }
          &.ghost {
            background: #f56c6c;
            border: 2px solid #f56c6c;
            outline-width: 0;
            height: 3px;
            box-sizing: border-box;
            font-size: 0;
            content: '';
            overflow: hidden;
            padding: 0;
          }
        }
        .widget-col {
          padding: 5px;
          background-color: rgba(253, 246, 236, 0.3);
          &.active {
            outline: 2px solid #e6a23c;
            border: 1px solid #e6a23c;
          }
          &:hover {
            background: #fdf6ec;
            outline: 1px solid #e6a23c;
            outline-offset: 0px;
            &.active {
              outline: 2px solid #e6a23c;
              border: 1px solid #e6a23c;
              outline-offset: 0;
            }
          }
          &.ghost {
            background: #f56c6c;
            border: 2px solid #f56c6c;
            outline-width: 0;
            height: 3px;
            box-sizing: border-box;
            font-size: 0;
            content: '';
            overflow: hidden;
            padding: 0;
          }
          .widget-view-action {
            &.widget-col-action {
              position: absolute;
              height: 28px;
              right: -2px;
              bottom: -2px;
              line-height: 28px;
              background: #e6a23c;
              z-index: 999;
              .svg-icon {
                font-size: 14px;
                color: #fff;
                margin: 0 5px;
                cursor: pointer;
              }
            }
          }
          .widget-view-drag {
            &.widget-col-drag {
              position: absolute;
              height: 28px;
              left: -2px;
              top: -2px;
              line-height: 28px;
              background: #e6a23c;
              z-index: 999;
              // z-index: 10;
              .svg-icon {
                font-size: 14px;
                color: #fff;
                margin: 0 5px;
                cursor: move;
              }
            }
          }
          &::after {
            display: none;
          }
        }
        .ghost {
          background: #f56c6c;
          border: 2px solid #f56c6c;
          outline-width: 0;
          height: 3px;
          box-sizing: border-box;
          font-size: 0;
          content: '';
          overflow: hidden;
          padding: 0;
        }
      }
      .widget-form-hidden {
        border-top: none;
      }
    }
    .hidden_area,
    .trash_area {
      flex: 1;
      height: $height - 90;
    }
    .button_area {
      .widget-form-button {
        border-bottom: none;
      }
    }
    .trash_area {
      .widget-form-trash {
        border-top: none;
        border-left: none;
      }
    }

    .ghost {
      background: #f56c6c;
      border: 2px solid #f56c6c;
      position: relative;
      &::after {
        background: #f56c6c;
      }
    }
    li {
      &.ghost {
        height: 5px;
        list-style: none;
        font-size: 0;
        overflow: hidden;
      }
    }
  }
  .widget-config-container {
    position: relative;
    .config-tab {
      border-bottom: 2px solid #e4e7ed;
      height: 100%;
      display: inline-block;
      flex: 1;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      position: relative;
      cursor: pointer;
      &.active {
        // border-bottom: 2px solid #409eff;
        border-bottom: 2px solid var(--el-color-primary);
      }
    }
    .config-content {
      padding: 10px;
      background: #fff;
      overflow: auto;
      .ElForm-item__label {
        padding: 0;
      }
      .label {
        font-size: 14px;
        font-weight: 500;
        margin: 0 5px;
        &:first-child {
          margin-left: 0;
        }
      }
      .drag-item {
        font-size: 16px;
        margin: 0 5px;
        cursor: move;
      }
    }
    .ghost {
      background: #fff;
      border: 1px dashed #409eff;
      &::after {
        background: #fff;
        display: block;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }
    ul {
      margin: 0;
      padding: 0;
    }
    li {
      &.ghost {
        list-style: none;
        font-size: 0;
        display: block;
        position: relative;
      }
    }
  }
  .form-empty {
    position: absolute;
    text-align: center;
    width: $height;
    font-size: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // margin-left: -150px;
    // margin-top: -25%;
    color: #ccc;
  }
  .form-empty-hidden {
    position: absolute;
    text-align: center;
    width: $height;
    font-size: 20px;
    top: 50%;
    left: 50%;
    // margin-left: -150px;
    transform: translate(-50%, -50%);
    color: #ccc;
  }
  .form-empty-trash {
    position: absolute;
    text-align: center;
    width: $height;
    font-size: 20px;
    top: 50%;
    left: 50%;
    // margin-left: -150px;
    transform: translate(-50%, -50%);
    color: #ccc;
  }
  .form-empty-button {
    position: absolute;
    text-align: center;
    width: $height;
    font-size: 20px;
    top: 50%;
    left: 50%;
    // margin-left: -150px;
    transform: translate(-50%, -50%);
    color: #ccc;
  }
  .widget-empty {
    background-position: 50%;
  }
}
.fc-style *,
.fc-style :after,
.fc-style :before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.fc-style .fc-container .ant-layout,
.fc-style .fc-container .el-container {
  height: 100% !important;
}
.fc-style .fc-container > .ant-layout,
.fc-style .fc-container .el-container {
  background: #fff;
}
.fc-style .fc-container .fc-main > .ant-layout,
.fc-style .fc-container .fc-main .el-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.fc-style .center-container .ant-layout-content,
.fc-style .center-container .el-main {
  height: calc(100% - 45px);
  padding: 0;
  position: relative;
  background: #fafafa;
}
.fc-style .widget-config-container .ant-layout-header,
.fc-style .widget-config-container .el-header {
  border: none;
  padding: 0 5px;
  height: 45px !important;
  line-height: 45px !important;
  background-color: #fff;
}
.fc-style .widget-config-container .config-content .ant-form-item-label,
.fc-style .widget-config-container .config-content .ElForm-item__label {
  font-weight: 500;
}
.fc-style .widget-config-container .config-content .ant-form-item,
.fc-style .widget-config-container .config-content .el-form-item,
.fc-style .widget-config-container .config-content h4 {
  padding-bottom: 10px;
  border-bottom: 1px solid #e1e1e1;
}

.widget-col-list:after {
  content: '020';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.widget-col-list {
  zoom: 1;
}
